<template>
    <div>
        <van-cell  v-for="(item,index) in searchLenove" :key="index"  icon="search" >
            <div slot="title" @click="$emit('search',item)" v-html="Thehighlighted(item)"></div>
        </van-cell>
    </div>
</template>
<script>
import {searchLevent} from "@/api/user"
import { debounce } from "lodash";


export default {
    props:{
        searchText:{
            type:String,
            required:true
        }
    },
    data(){
        return{
            searchLenove:[]
        }
    },
    methods:{
        Thehighlighted(str){
            // new RegExp(this.searchText,'gi')
            return str.replace(new RegExp(this.searchText,'gi'),`<span style="color:red;">${this.searchText}</span>`)
            

        }

    },
    created(){
        // console.log(debounced)
    },
    watch:{
        searchText:{
            handler: debounce( async function(){
                var {data}= await searchLevent(this.searchText)
                this.searchLenove = data.data.options 

            },200),
                    

            
           
            immediate: true
        }
    }
    
}
</script>
<style scoped lang="less">
/deep/.van-cell__title {
    text-align: left;
}

</style>